<style>
    legend {
        padding-bottom: 5px;
        font-size: 14px;
        font-weight: 600;
        padding-left: 10px;
        padding-right: 15px;
        padding-top: 12px;
        color: grey;
    }
    table tr th{
        color: #4198d4;
        text-align: center;
    }
    table tr td{
        text-align: center;
    }
    .content{
        padding: 10px;
    }
    .s-row {
        background: #eaf4fb;
        margin: 15px;
        border-radius: 5px;
    }
    .s-count {
        text-align: center;
    }
    .chat .item > .message{
        margin-top: 0px!important;
        margin-left: 0px!important;
        margin-right: 15px;
    }
    .box {
         border-top: none;
    }
    .box-header {
        border-bottom: 1px solid #ededed;
    }
    .table-bill {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .table-bill tbody {
        display: block;
        height: 250px;
        overflow: hidden;
    }

    .table-bill thead, .table-bill tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
        height: 40px;
    }
    .table-bill td {
        word-wrap: break-word;
        word-break: break-all;
    }
    .table-bordered tbody>tr>td {
        border: 1px solid #f4f4f4;
    }
    .panel-intro > .panel-heading {
        background: #ffffff;
    }
    .chat .item > .attachment > p {
        font-weight: unset!important;
        font-size: 13px;
        font-style: unset!important;
        margin: unset!important;
        color: grey;
    }
    #chart{
        min-height: 320px;
    }
</style>

<div class="row content">
    <div class="panel panel-default panel-intro">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#statistics" data-toggle="tab" aria-expanded="true">数据统计</a></li>
                <li><a href="#thread-list" data-toggle="tab" aria-expanded="true">流程控制</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="statistics">
                    <div class="row s-row">
                        <div class="col-sm-3 col-xl-3 s-count">
                            <div class="p-4">
                                <div class="ms-3">
                                    <p class="mb-2">已发起</p>
                                    <h4 class="mb-0"><b>{$totalData.total|htmlentities}</b></h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-xl-3 s-count">
                            <div class="p-4">
                                <div class="ms-3">
                                    <p class="mb-2">审批中</p>
                                    <h4 class="mb-0"><b>{$totalData.run|htmlentities}</b></h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-xl-3 s-count">
                            <div class="p-4">
                                <div class="ms-3">
                                    <p class="mb-2">已完结</p>
                                    <h4 class="mb-0"><b>{$totalData.finish|htmlentities}</b></h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-xl-3 s-count">
                            <div class="p-4">
                                <div class="ms-3">
                                    <p class="mb-2">被终止</p>
                                    <h4 class="mb-0"><b>{$totalData.termination|htmlentities}</b></h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="box" style="position: relative; left: 0px; top: 0px;">
                                <div class="box-header">
                                    <i class="fa fa-list"></i>
                                    <span>近期活动</span>
                                </div>
                                <div class="box-body chat" id="recent-box">
                                    {volist name='recentLog' id='log'}
                                    <div class="item">
                                        <p class="message">
                                            <a href="#" class="name">
                                                <small class="text-muted pull-right">
                                                    <i class="fa fa-clock-o"></i>
                                                    {$log['createtime']|htmlentities}
                                                </small>
                                                {$log['bill_name']|htmlentities}
                                            </a>
                                            用户<span class="text-warning"> {$log['worker_name']|htmlentities}</span>
                                           {if $log['check_type'] == 3}发起了{$log['check_behavior']|htmlentities}
                                            {else /}{$log['check_behavior']}了审批{/if}
                                            {if $log['check_type'] != 4}
                                            ，当前步骤：<span class="text-success"> {$log['step_name']|htmlentities}</span>
                                            {/if}
                                        </p>
                                        <div class="attachment">
                                            <h4>审批内容:</h4>
                                            <p>
                                                {$log['check_content']|htmlentities}
                                            </p>
                                            <div class="pull-right">
                                                {if $log['hasbill'] == true}
                                                <a href="fastflow/flow/flow/detail?bill={$log['bill']}&bill_id={$log['bill_id']}" class="btn btn-xs btn-success btn-dialog btn-detail" title="查看" data-area="[&quot;80%&quot;,&quot;90%&quot;]" data-table-id="table" style="margin-right: 4px;font-size: 90%;"><i class="fa fa-list" style="margin-right: 4px;"></i>查看</a>
                                                {/if}
                                            </div>
                                        </div>
                                    </div>
                                    {/volist}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-4">
                                <div class="box">
                                    <div class="box-body">
                                        <h4 class="text-center">今日新增</h4>
                                        <ul class="list-group list-group-unbordered">
                                            <li class="list-group-item">
                                                <b>发起单据</b> <a class="pull-right">{$recentCount['today']['start']|htmlentities}</a>
                                            </li>
                                            <li class="list-group-item">
                                                <b>执行审批</b> <a class="pull-right">{$recentCount['today']['work']|htmlentities}</a>
                                            </li>
                                            <li class="list-group-item">
                                                <b>完结单据</b> <a class="pull-right">{$recentCount['today']['done']|htmlentities}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-4">
                                <div class="box">
                                    <div class="box-body">
                                        <h4 class="text-center">本周新增</h4>
                                        <ul class="list-group list-group-unbordered">
                                            <li class="list-group-item">
                                                <b>发起单据</b> <a class="pull-right">{$recentCount['week']['start']|htmlentities}</a>
                                            </li>
                                            <li class="list-group-item">
                                                <b>执行审批</b> <a class="pull-right">{$recentCount['week']['work']|htmlentities}</a>
                                            </li>
                                            <li class="list-group-item">
                                                <b>完结单据</b> <a class="pull-right">{$recentCount['week']['done']|htmlentities}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-4">
                                <div class="box">
                                    <div class="box-body">
                                        <h4 class="text-center">本月新增</h4>
                                        <ul class="list-group list-group-unbordered">
                                            <li class="list-group-item">
                                                <b>发起单据</b> <a class="pull-right">{$recentCount['month']['start']|htmlentities}</a>
                                            </li>
                                            <li class="list-group-item">
                                                <b>执行审批</b> <a class="pull-right">{$recentCount['month']['work']|htmlentities}</a>
                                            </li>
                                            <li class="list-group-item">
                                                <b>完结单据</b> <a class="pull-right">{$recentCount['month']['done']|htmlentities}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="table-bill">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>单据</th>
                                            <th>已发起</th>
                                            <th class="text-success">审批中</th>
                                            <th class="text-warning">已完结</th>
                                            <th class="text-danger">被终止</th>
                                        </tr>
                                    </thead>
                                    <tbody id="bill-rows">
                                    {volist name='statisticDataList' id='data'}
                                    <tr>
                                        {if $data.comment == ''}
                                        <td>{$key}</td>
                                        {else /}
                                        <td>{$data.comment|htmlentities}</td>
                                        {/if}
                                        <td>{$data.total|htmlentities}</td>
                                        <td>{$data.run|htmlentities}</td>
                                        <td>{$data.finish|htmlentities}</td>
                                        <td>{$data.termination|htmlentities}</td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                            <div id="chart"></div>
                        </div>
                    </div>

                </div>
                <div class="tab-pane" id="thread-list">
                    <div class="panel panel-default panel-intro">
                        <div class="panel-heading">
                            {:build_heading(null,FALSE)}
                            <ul class="nav nav-tabs" data-field="status">
                                <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
                                {foreach name="statusList" item="vo"}
                                <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
                                {/foreach}
                            </ul>
                        </div>
                        <div class="panel-body">
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade active in" id="one">
                                    <div class="widget-body no-padding">
                                        <div id="toolbar" class="toolbar">
                                            <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                                        </div>
                                        <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                                               data-operate-edit=""
                                               data-operate-del=""
                                               width="100%">
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




